<script setup lang="ts">
import { onMounted, ref } from 'vue';

import { Button, message } from 'ant-design-vue';

import { getHotelFacilityDetail, updateHotelFacility } from '#/api';

import Facility from './components/Facility.vue';

const listJson = ref<any[]>([
  {
    id: '100',
    name: '热门设施',
    list: [
      {
        id: '101',
        name: '餐厅',
        key: 'isRestaurant',
      },
      {
        id: '102',
        name: '停车场',
        key: 'isParking',
      },
    ],
  },
  {
    id: '200',
    name: '交通服务',
    list: [
      {
        id: '201',
        name: '接送机',
        key: 'isAirportPickup',
      },
      {
        id: '202',
        name: '接送站服务',
        key: 'isStationPickup',
      },
    ],
  },
  {
    id: '300',
    name: '公共区',
    list: [
      {
        id: '301',
        name: '公用区wifi',
        key: 'isPublicWifi',
      },
      {
        id: '302',
        name: '电梯',
        key: 'isElevator',
      },
    ],
  },
  {
    id: '400',
    name: '公共区',
    list: [
      {
        id: '401',
        name: '行李寄存',
        key: 'isLuggageStorage',
      },
    ],
  },
]);
// 展开的面板id
const activeKey = ref(['100', '200', '300', '400']);

interface FormData {
  isRestaurant: boolean | null; // 餐厅
  isParking: boolean | null; // 停车场
  isAirportPickup: boolean | null; // 接送机
  isStationPickup: boolean | null; // 接送站
  isPublicWifi: boolean | null; // 公用区wifi
  isElevator: boolean | null; // 电梯
  isLuggageStorage: boolean | null; // 行李寄存
}
// 表单数据 true为有 false为无
const form = ref<FormData>({
  isRestaurant: true, // 餐厅
  isParking: true, // 停车场
  isAirportPickup: true, // 接送机
  isStationPickup: true, // 接送站
  isPublicWifi: true, // 公用区wifi
  isElevator: true, // 电梯
  isLuggageStorage: true, // 行李寄存
});

// 查询详情
const getDetail = async () => {
  try {
    const { data } = await getHotelFacilityDetail();
    form.value = data;
  } catch (error) {
    console.error('查询设施失败', error);
  }
};

// 保存
const submit = async () => {
  try {
    await updateHotelFacility(form.value);
    message.success('保存成功');
    getDetail();
  } catch (error) {
    console.error('保存设施失败', error);
  }
};

onMounted(() => {
  getDetail();
});
</script>

<template>
  <div
    class="absolute bottom-0 right-0 flex h-[100%] w-[100%] flex-col overflow-hidden"
  >
    <div class="main overflow-auto p-4">
      <div class="mb-4 text-2xl font-bold">酒店设施</div>
      <Facility
        v-for="item in listJson"
        :key="item.id"
        v-model:active-key="activeKey"
        v-model:form="form"
        :data="item"
      />
    </div>

    <div class="card-box bottom-div rounded-none border-l-0 px-5 py-3">
      <Button size="large" type="primary" @click="submit">
        <span>保存</span>
      </Button>
    </div>
  </div>
</template>

<style scoped lang="scss">
:deep(.bottom-div .ant-btn) {
  width: 10rem;
  border-radius: 0;
}

:deep(.ant-checkbox .ant-checkbox-inner) {
  border-radius: 0;
}

.main {
  flex: 1;
}
</style>
